<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:gp="http://gp.componentes.jsf">

<ui:composition template="/WEB-INF/adicional/templates/templateHome.xhtml">

	<ui:define name="tituloPagina">Inclusão de Clinicas</ui:define>
	
	<ui:define name="conteudoCabecalho">
				
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/accordion/js/accordion.js"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/autocompletecombo/js/AutoCompleteCombo.js"></script>	
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/clinica/incluirClinicaFormulario.js"></script>	
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/js/clinica/clinica.js"></script>	
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/calendario/js/Datepicker.js"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/autoComplete/js/AutoComplete.js"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/spinner/js/spinner.js"></script>	
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/tooltip/js/tooltip.js"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/slider/js/slider.js"></script>		
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/button/js/Button.js"></script>
		<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/resources/componentes/validator/js/Validator.js"></script>
		
		<link type="text/css" rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/resources/css/clinica/incluirClinica.css"/> 	
		<link type="text/css" rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/resources/componentes/tooltip/css/tooltip.css"/>
		<link type="text/css" rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/resources/componentes/slider/css/slider.css"/>
		
	</ui:define>
	
	<ui:define name="conteudoCentro">
		
		<h:form id="formularioImagem" enctype="multipart/form-data" target="frameIncluirClinica">
			
			<p:dialog widgetVar="dialogImagem" id="dialogImagem" resizable="false" closable="true" header="Upload de Imagem"
			visible="false" modal="true">
				
				<div id="containerMsgImagem" class="campo_invisivel">
						
				</div>
						
				<div>
					<img id="imagemClinicaEscolhida" class="imagem_clinica"/>
				</div>
						
				<div>
				
					<h:outputText value="Escolha uma imagem para a Clinica: " />
				
				</div>
				
				<div>

					<h:inputFile id="imagemClinica" label="Imagem da Clinica"
					value="#{clinica.imagemClinica}"></h:inputFile>

				</div>
				
				<div>
				
					<p:commandButton value="Enviar Imagem" action="#{clinica.uploadArquivoImagem}" ajax="false"></p:commandButton>
					
				</div>

			</p:dialog>
			
		</h:form>
	
		<h:form name="formulario" id="formulario">
			
		<h:panelGrid rendered="#{clinica.flagFrameInc}">
			
			<script type="text/javascript">
			
				$("#containerMsgImagem", top.document).removeClass('campo_invisivel');

				$("#containerMsgImagem", top.document).html("#{clinica.msgImagem}");
			
			</script>
			
		</h:panelGrid>
			
		<div>
			<p:messages showSummary="true" showDetail="true" closable="true"></p:messages>
		</div>
				
		<div class="ui-messages-error ui-corner-all campo_invisivel" id="containerErro">
							
		</div>
		
		<gp:validator form="formulario" submitHandler="validarFormulario">
		
			<div id="accordion">
				
			<h3 id="cabecalhoDadosClinica">
				<h:outputLabel value="Dados da Clinica" />
			</h3>

			<div>
  				
  				
	 <gp:tooltip id="tooltip" seletor="formulario" content="Informe o nome da clinica">
			
				<gp:fieldValidation fieldId="nomeClinica">
				
					<h:outputLabel value="#{msgs.incluir_clinica_label_nome}"  for="nomeClinica"/>
					<h:inputText value="#{clinica.nomeClinicaInc}" binding="#{clinica.campoNomeClinicaInc}" 
					id="nomeClinica" label="Nome da Clinica"  maxlength="100" />
					<span class="label_msg_erro" id="msgNome"></span>
				
				</gp:fieldValidation>
						
						
			
	</gp:tooltip>
	
	
	<!-- <gp:tooltip id="tooltipNome" title="Informe o Nome da Clinica" effectHide="explode" effectShow="elastic" durationHide="2000" durationShow="10">
  			
      				<h:outputLabel value="#{msgs.incluir_clinica_label_nome}" for="nomeClinica"/>
      				<h:inputText value="#{clinica.nomeClinicaInc}" binding="#{clinica.campoNomeClinicaInc}"  id="nomeClinica" label="Nome da Clinica"  maxlength="100" />
     				 <span class="label_msg_erro" id="msgNome"></span>
   
  	 	</gp:tooltip> -->
				
				<gp:fieldValidation fieldId="cnpjClinica" min="4">
				
					<h:outputLabel value="#{msgs.incluir_clinica_label_cnpj}" for="cnpjClinica" />
					<h:inputText value="#{clinica.cnpjClinicaInc}" binding="#{clinica.campoCnpjClinicaInc}" 
					id="cnpjClinica" label="Cnpj da Clinica"/>
					<span class="label_msg_erro" id="msgCnpj"></span>
				
				</gp:fieldValidation>
		
			</div>
			
			<h3><h:outputLabel value="Emails" /></h3>

			<div>
				
				<gp:fieldValidation fieldId="emailClinica1" required="true" email="true">
				
					<h:outputLabel value="#{msgs.incluir_clinica_label_email1}" for="emailClinica1" />
					<h:inputText value="#{clinica.emailClinicaInc1}" binding="#{clinica.campoEmailClinciaInc1}" 
					id="emailClinica1" label="Email 1" maxlength="100"/>
				
				</gp:fieldValidation>
				
				<gp:fieldValidation fieldId="emailClinica2" email="true">
					<h:outputLabel value="#{msgs.incluir_clinica_label_email2}" for="emailClinica2" />
					<h:inputText value="#{clinica.emailClinicaInc2}" binding="#{clinica.campoEmailClinciaInc2}" 
					id="emailClinica2" label="Email 2" maxlength="100"/>
				</gp:fieldValidation>
			
			</div>

			<h3><h:outputLabel value="Telefones" /></h3>

			<div>
			<h:outputLabel value="#{msgs.incluir_clinica_label_ddd1}" for="dddClinica1"/>	
			<gp:spinner id="dddClinica1" form="formulario" min="1" max="99" disabled="false">	
				
			<h:inputText value="#{clinica.dddClinicaInc1}" binding="#{clinica.campoDddClinicaInc1}" 
			id="dddClinica1" label="DDD1" maxlength="2"/>
			
			</gp:spinner>
			
			<h:outputLabel value="#{msgs.incluir_clinica_label_telefone1}" for="telefoneClinica1"/>
			<h:inputText value="#{clinica.telefoneClinicaInc1}" binding="#{clinica.campoTelefoneClinicaInc1}" 
			id="telefoneClinica1" label="Telefone1" maxlength="9"/>
			
			<h:outputLabel value="#{msgs.incluir_clinica_label_tipo1}" for="tipoTelefone1"/>
			<h:selectOneMenu value="#{clinica.codTipoTelefoneInc1}" binding="#{clinica.campoTipoTelefoneInc1}" 
			id="tipoTelefone1" label="TipoTelefone" >
			
				<f:selectItem itemLabel="::SELECIONE::" itemValue="0"/>
				<f:selectItems value="#{clinica.listaTipoTelefoneInc}"></f:selectItems>
				
			</h:selectOneMenu>
			<p>
					
			</p>
			<h:outputLabel value="#{msgs.incluir_clinica_label_ddd2}" for="dddClinica2"/>	
			
			<gp:spinner id="dddClinica2" form="formulario" min="1" max="99" disabled="false">	

				<h:inputText value="#{clinica.dddClinicaInc2}" binding="#{clinica.campoDddClinicaInc2}"
	 			id="dddClinica2" label="DDD2" maxlength="2"/>
			
			</gp:spinner>	
			
			<h:outputLabel value="#{msgs.incluir_clinica_label_telefone2}" for="telefoneClinica2"/>
			<h:inputText value="#{clinica.telefoneClinicaInc2}" binding="#{clinica.campoTelefoneClinicaInc2}" 
			id="telefoneClinica2" label="Telefone2" maxlength="9"/>
			
			<h:outputLabel value="#{msgs.incluir_clinica_label_tipo2}" for="tipoTelefone2"/>
			<h:selectOneMenu value="#{clinica.codTipoTelefoneInc2}" binding="#{clinica.campoTipoTelefoneInc2}" 
			id="tipoTelefone2" label="TipoTelefone2">
			
				<f:selectItem itemLabel="::SELECIONE::" itemValue="0"/>
				<f:selectItems value="#{clinica.listaTipoTelefoneInc}"></f:selectItems>
				
			</h:selectOneMenu>
			</div>
			
			<h3><h:outputLabel value="Enderecos" /></h3>
						
			<div>
			<h:outputLabel value="#{msgs.incluir_clinica_label_estado}" for="comboEstado" />
			<h:selectOneMenu value="#{clinica.codEstadoInc}" binding="#{clinica.campoEstadoInc}" id="comboEstado" label="Estados">
				
				<f:ajax event="change" listener="#{clinica.buscarCidadePorEstado}" render="comboCidade"></f:ajax>
				
				<f:selectItem itemValue="0"  itemLabel="Digite ou Selecione"/>
				<f:selectItems value="#{clinica.listaEstadosInc}"/>
			
			</h:selectOneMenu>
			<p>
			
			</p>		
			<h:outputLabel value="#{msgs.incluir_clinica_label_cidade}" for="comboCidade"/>
		   <h:selectOneMenu value="#{clinica.codCidadeInc}" binding="#{clinica.campoCidadeInc}" id="comboCidade" 
   			label="Cidades" disabled="#{empty clinica.listaCidadesInc}">
    
			    <f:selectItem itemValue="0" itemLabel="::SELECIONE::"/>
			    
			    <f:selectItems value="#{clinica.listaCidadesInc}"/>
   
			</h:selectOneMenu>			
			<p>
					
			</p>
			<p>
					
			</p>
			<h:outputLabel value="#{msgs.incluir_clinica_label_logradouro}" for="logradouroClinica" />
			<h:inputText value="#{clinica.logradouroClinicaInc}" binding="#{clinica.campoLogradouroClinicaInc}" 
			id="logradouroClinica" label="Logradouro Clinica" maxlength="200"/>
			<span class="msg_erro" id="msgLogradouro"></span>
			
			<gp:fieldValidation fieldId="bairroClinica" required="true">
			
				<h:outputLabel value="#{msgs.incluir_clinica_label_bairro}" for="bairroClinica" />
				<h:inputText value="#{clinica.bairroClinicaInc}" binding="#{clinica.campoBairroClinicaInc}"  
				id="bairroClinica" label="Bairro Clinica" maxlength="150"/>
				<span class="msg_erro" id="msgBairro"></span>
			
			</gp:fieldValidation>
				
			
			<gp:fieldValidation fieldId="cepClinica" required="true" number="true">
				<h:outputLabel value="#{msgs.incluir_clinica_label_cep}" for="cepClinica"/>
				<h:inputText value="#{clinica.cepClinicaInc}" binding="#{clinica.campoCepClinicaInc}"  
				id="cepClinica" label="Cep Clinica" maxlength="8"/>
				<span class="msg_erro" id="msgCep"></span>
			</gp:fieldValidation>
			
			<p>
					
			</p>
			<h:outputLabel value="#{msgs.incluir_clinica_label_complemento}" for="complementoClinica" />
			<h:inputText value="#{clinica.complementoClinicaInc}" binding="#{clinica.campoComplementoClinicaInc}" 
			id="complementoClinica" label="Complemento Clinica" maxlength="100"/>
			<span class="msg_erro" id="msgComplemento"></span>
			</div>
				
			<h3><h:outputLabel value="Data de Abertura" /></h3>
			
			<div>
			
			<h:outputLabel value="Data de Abertura: " for="dataAberturaClinica" />
			
			<h:inputText value="#{clinica.dataAberturaInc}" label="Data de Abertura" id="dataAberturaClinica">
				<f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT-3"/>
			</h:inputText>
			
			</div>
				
			<h3><h:outputLabel value="Imagem da Clinica" /></h3>
			<div>
			<h:commandLink value="Abrir Dialog de Imagem"  onclick="PF('dialogImagem').show();return false"/>
			
			</div>
			
			<h3><h:outputLabel value="Pesquisar Clinicas" /></h3>
   			<div>

    		<h:outputLabel value="Selecione uma Clinica:" />
   			<h:inputText id="testeAutoComplete" value="#{clinica.campoAutoComplete}"/>
  
  			</div>
        	
			</div>
			
			<p>
				<label for="amount">Number of rooms::</label>
				<input type="text" id="amount" class="slider"></input>
			</p>
			
			<gp:slider id="slider" form="formulario" max="10" idText="amount">
				
				<div id="slider"></div>
		   
		    </gp:slider>
			
				<!-- CLIQUE PRIMEIRO NESSE BOTÃO PARA FORMAR UM ACCORDION  -->
	<!-- 			<p:commandButton id="btnCriar" oncomplete="accordion.create('#formulario #accordionNovo')" value="Criar Accordion" /> -->
				
	<!-- 			<div id="accordionNovo" onclick="accordion.create('#accordion')"> -->
				
	<!-- 			<h1>Clique para adicionar um accordion novo</h1> -->
				
	<!-- 			</div> -->
				
			<div>
			
			<h:button value="Enviar Formulário" id="btnEnviarFormulario" onclick="return false"></h:button>
			
			<h:button value="Limpar Formulário" id="btnLimparFormulario" onclick="return false"></h:button>
	
			<p:commandButton styleClass="campo_invisivel" value="#{msgs.incluir_clinica_input_enviar}" action="#{clinica.salvarClinica}"  
			onclick="return true" update="@form" id="btnEnviar"></p:commandButton>
				
			<p:commandButton styleClass="campo_invisivel" value="#{msgs.incluir_clinica_input_Limpar}" action="#{clinica.limparFormulario}" 
			update="@form" immediate="true" onclick="accordion.refresh('#formulario #accordion') limparFormulario();" id="btnLimpar"></p:commandButton>
			
			</div>
			
			<div id="testeDiv" class="teste">
			
			</div>
			
			<iframe name="frameIncluirClinica" class="campo_invisivel">
			
			</iframe>
			
			<gp:autocomplete position="right top" minLength="2" disabled="false" delay="200" autoFocus="true" idAutocomplete="autocomplete" form="formulario" keyField="idPessoa" keyValue="nomePessoa" atributeStatusName="statusPessoa" columnStatusName="tipoStatus" columnStatusValue="1" labelField="nomePessoa" valueField="nomePessoa" className="br.trainee.web.vo.ClinicaVO" columnName="nomePessoa"/>
		
		</gp:validator>
		
		</h:form>
	
	</ui:define>

</ui:composition>

</html>